<template>
    <div class="container" ref='container'>
        <div class="title">长治市信创设备情况</div>
        <div class="tools">
            <div class="nav-box">
                <div @click="changeCom(item.id)" :class="['nav-item', { 'active': isActive == item.id }]"
                    v-for="(item, index) in navArr" :key="item.id">
                    {{ item.name }}
                </div>
            </div>
            <div class="data-weatgher">
                <div class="left-info">
                    <div class="info-box">
                        <div class="weather">
                            <span style="width: 70px;display: block;margin-left: auto;">晴 15°C</span>
                            <span style="width: 80px;display: block;">2024.04.29</span>
                        </div>
                        <div class="icon">
                            <img class="weather-icon" :src="weatherIcon" />
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="times">{{ newTime }}</div>
                </div>
                <div class="right-info">
                    <div @click="fullScreens" class="full-screen"></div>
                </div>
            </div>
        </div>
        <div class="content">
            <component :is="currentComponent"></component>
        </div>
    </div>
</template>

<script>
import { getWeather } from '@/api/index'
import weatherStaticConfig from '@/utils/weatherConfig.js'
import * as dayjs from 'dayjs'
export default {
    name: "index",
    components: {
        xinchaung: () => import('./xinchaung/index.vue'),
        yunwei: () => import('./yunwei/index.vue'),
        kaiji: () => import('./kaiji/index.vue')
    },
    data() {
        return {
            navArr: [
                {
                    id: 1,
                    name: '信创设备'
                },
                {
                    id: 2,
                    name: '运维数据'
                },
                {
                    id: 3,
                    name: '开机率'
                }
            ],
            isActive: 1,
            currentComponent: 'xinchaung',
            newTime: null,
            timer: null,
            fullScreen: false,
            weatherIcon: null
        };
    },
    mounted() {
        // this.getweathernew()
    },
    created() {
        this.$nextTick(() => {
            if (this.timer) {
                clearInterval(this.timer)
            }
            this.timer = setInterval(() => {
                this.newTime = dayjs().format('HH:mm:ss')
            })
        })
    },
    unmounted() {
        clearInterval(this.timer)
    },
    methods: {
        changeCom(id) {
            this.isActive = id
            let comMap = {
                1: 'xinchaung',
                2: 'yunwei',
                3: 'kaiji',
            }
            this.currentComponent = comMap[id]
        },
        fullScreens() {
            // 获取需要全屏展示的div
            let fullarea = this.$refs.container
            if (!document.fullscreenElement) {
                // 全屏
                fullarea.requestFullscreen();
                this.fullScreen = true
            } else {
                // 退出全屏
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                    this.fullScreen = false
                }
            }
        },
        // 获取天气
        // getweathernew() {
        //     let fileName = ''
        //     try {
        //         getWeather('长治').then(res => {
        //             console.log(res)
        //             let index = weatherStaticConfig.findIndex((item) =>
        //                 item.label.includes(res.result.forecast.type),
        //             )
        //             if (index > -1) {
        //                 fileName = weatherStaticConfig[index].icon
        //             } else {
        //                 fileName = weatherStaticConfig[0].icon
        //             }
        //             this.weatherIcon = require('../assets/weather/' + fileName)
        //         })
        //     } catch (error) {
        //         fileName = weatherStaticConfig[0].icon
        //         this.weatherIcon = require('../assets/weather/' + fileName)
        //     }
        // },
    }
}
</script>

<style lang='less' scoped>
.container {
    width: 100%;
    height: 100%;
    background: url('~@/assets/screen/大背景.jpg') no-repeat;
    background-size: 100% 100%;

    .title {
        font-size: 42px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 8px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 70px;
    }

    .tools {
        height: 40px;
        width: 100%;
        // background-color: red;
        margin-top: -15px;
        box-sizing: border-box;
        padding: 0px 70px;
        padding-right: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .nav-box {
            display: flex;
            gap: 10px;
            height: 100%;

            .nav-item {
                cursor: pointer;
                width: 140px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: SourceHanSansCN-Medium;
                font-size: 20px;
                font-weight: normal;
                font-style: italic;
                font-stretch: normal;
                letter-spacing: 1px;
                color: #c8e3fc;
                opacity: 0.85;

                &:hover {
                    cursor: pointer;
                    background: url('~@/assets/screen/nav.png') no-repeat;
                    background-size: 100% 100%
                }
            }

            .active {
                cursor: pointer;
                background: url('~@/assets/screen/nav.png') no-repeat;
                background-size: 100% 100%
            }
        }

        .data-weatgher {
            color: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100%;

            .left-info {
                display: flex;
                justify-content: space-between;
                gap: 10px;
                height: 80%;

                .info-box {
                    display: flex;
                    gap: 5px;
                    height: 100%;

                    .weather {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        margin-left: auto;
                        font-size: 14px;
                        align-items: center;
                    }

                    .icon {
                        width: 40px;
                        height: 100%;
                        display: flex;
                        align-items: center;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                .times {
                    display: flex;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    font-size: 20px;
                }

                .line {
                    width: 1px;
                    height: 100%;
                    background: #ffffff;
                    display: flex;
                    align-items: center;
                    margin: 0 10px;
                    opacity: 0.3;
                }
            }

            .right-info {
                cursor: pointer;
                width: 32px;
                height: 32px;
                margin-left: 90px;

                .full-screen {
                    width: 100%;
                    height: 100%;
                    background: url('~@/assets/screen/缩放.png')
                }
            }
        }
    }

    .content {
        width: 100%;
        height: calc(100% - 100px);
        box-sizing: border-box;
        padding: 15px 29px 30px 52px;
        // padding-bottom: 30px;
    }
}

.maps {
    width: 100%;
    height: 100%;
}
</style>